<template>
  <view class="page">
    <view class="box">
      <view id="box" class="box-view" v-if="!dataURL">
        <view class="head">
          <img :src="avatar" mode="" />
          <view class="right">
            <view>{{ nickname }}</view>
            <view>邀请您注册{{ name }}</view>
          </view>
        </view>
        <img class="image" :src="h5_img" mode="" />
        <img class="qrcode" :src="uqcode" mode="" />
      </view>
      <img v-if="dataURL" class="dataURL" :src="dataURL" mode="" />
    </view>

    <view class="font">
      <view>长按保存图片</view>
      <view>分享图片给您好友注册下单即获得奖励</view>
    </view>
  </view>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      nickname: "",
      show_poster: false, //显示海报
      path: "", //生成的图片地址
      posterObj: {},
      footer_arr: [], //底部选项
      check_idx: 0, //底部选中的下标
      type: 0,
      uqcode:
        "https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210281822300135311.png",
      avatar:
        "https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210281822300135311.png",
      dataURL: "",
      name: "",

      h5_img:
        "https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202211/202211022243570128071.jpg",
    };
  },
  async onLoad(e) {
    uni.showLoading({
      title: "海报生成中",
    });
    await this.getConfig();
    if (e) {
      this.type = e.type;
    }
    await this.$http.post("api/user/userInfo").then((res) => {
      let { id, nickname, avatar } = res;
      this.id = id;
      this.nickname = nickname;
      this.avatar = avatar;
    });

    if (this.type == 0) {
      this.url = "/h5/";
    } else {
      this.url = "pages/index/index";
    }
    await this.$http
      .post("api/distribution/getQrcode", {
        url: this.url,
        type: this.type,
      })
      .then((res) => {
        this.uqcode = res;
      });

    await this.$http.post("api/index/shareConfig").then((res) => {
      const { name, logo, h5, share_title, share_content, h5_img } = res;
      this.avatar = logo;
      this.name = name;
      this.h5_img = h5_img;
      this.logo = logo;
      this.share_title = share_title;
      this.share_content = share_content;
      this.url = h5 + `/h5/?pid=${this.id}`;
    });

    let dom = document.getElementById("box");
    let that = this;
    html2canvas(dom, {
      width: dom.getBoundingClientRect().width, //画布的宽
      height: dom.getBoundingClientRect().height, //画布的高
      //scale: 4, //处理模糊问题
      useCORS: true, //开启跨域，这个是必须的
      scale: 2, // 处理模糊问题
      dpi: 900, // 处理模糊问题
    }).then((canvans) => {
      let dataURL = canvans.toDataURL("image/png");
      that.dataURL = dataURL;
    });

    uni.hideLoading();
  },
  methods: {
    getConfig() {
      this.$http.post("api/index/shareConfig").then((res) => {
        const { name, h5_img } = res;
        this.h5_img = h5_img;
        this.name = name;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  margin-top: 20rpx;
  transform: translateX(5%);
  overflow: hidden;
  border-radius: 20rpx;
  width: 90%;
  position: relative;
  &-view {
    height: 100%;
    position: relative;
  }
}
.image {
  height: 100%;
  width: 100%;
}
.font {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  view:last-of-type {
    color: rgba(173, 172, 172, 1);
    margin-top: 10rpx;
    font-size: 28rpx;
  }
}
.dataURL {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.head {
  position: absolute;
  width: 100%;
  padding: 20rpx 0;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  z-index: 9;
  image,
  img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin: 0 10rpx 0 40rpx;
  }
  .right {
    color: white;
    flex: 1;
    font-size: 28rpx;
    margin-left: 5rpx;
    view:first-of-type {
      font-weight: bold;
    }
    view:last-of-type {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.qrcode {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  bottom: 125rpx;
  right: 50rpx;
}
</style>
